/** @jsxImportSource @emotion/react */
import * as React from "react";
import {RepLink } from "../../common/base";
import {CCell, Cell, RCell, Table, TableBody, TableRow, Text, useTheme} from "customize-easy-ui-component";
import {TwoRaftDeviceInfo} from "../../contain/views";
import {config证书概要} from "./orcBase";
import {ReportFirstPageHeadCyCert} from "./rarelyVary";

//必须给第一层的Table加上"@media print": {height:'82vh',} } }，而不是其父div加高度vh的，才能确保第二层Table撑开可用区域。 依赖自动调节
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
    const theme= useTheme();
    const callback = () => {
        return <div  css={{"@media print": {height:'100vh', overflowY: 'hidden',} }}>
            {ReportFirstPageHeadCyCert({theme, rep,})}
            <div css={{
                "@media print": {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-around',
                    height: 'calc(100vh - 3rem)',     //剪掉上面头部的高度
                }
            }}>
                <Text css={{display: 'block',textAlign:'center',lineHeight:'0.9',marginBottom:'0.2rem', fontSize: theme.fontSizes[5]}}>
                    特种设备安装监督检验证书
                </Text>
                <Text variant="h6" css={{textAlign: 'center',marginBottom:0}}> （锅炉）</Text>
                <div>
                    <div css={{display: 'flex',justifyContent: 'space-between',}}>
                        &nbsp;
                        <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
                        }}>证书编号：{rep.isp?.no}</Text>
                    </div>
                    <Table fixed={ ["16.1%", "36%", "15.3%", "%"] }  css={ {borderCollapse: 'collapse',
                                                   "@media print": {height:'82vh',} } } tight  miniw={800}>
                        <TableBody>
                            <TwoRaftDeviceInfo orc={orc} rep={rep} config={config证书概要}/>
                            <RepLink rep={rep} tag='Conclusion'>
                                <TableRow>
                                    <Cell colSpan={4}>说明：<br/>
                                        <div css={{minHeight: '6rem', whiteSpace: 'pre-wrap',marginTop: '0.2rem',padding:'0.2rem',textIndent:'2rem'}}>
                                            {orc?.证书说明 || '／'}
                                        </div>
                                    </Cell>
                                </TableRow>
                                <TableRow >
                                    <CCell colSpan={4} >
                                        <Table  fixed={ ["24%", "39%", "6%", "%"] }
                                                        css={{borderCollapse: 'collapse',  }}  tight  miniw={800}>
                                            <TableBody>
                                                {(orc?.检验结论 === '符合要求' || orc?.检验结论 === '基本符合要求') && <TableRow>
                                                    <Cell css={{border: 'none', textIndent: '2rem',}} colSpan={4}>
                                                        按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该锅炉的安装经我机构监督检验，
                                                        安全性能符合《锅炉安全技术规程》的要求，特发此证书。
                                                    </Cell>
                                                </TableRow>
                                                }
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>监 检：</RCell>
                                                    <Cell css={{border: 'none'}}>机erter</Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}>{orc?.检验日期 ?? '／'}</Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>审 核：</RCell>
                                                    <Cell css={{border: 'none'}}></Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>批 准：</RCell>
                                                    <Cell css={{border: 'none'}}></Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow>
                                                    <RCell css={{border: 'none'}}>监检机构：</RCell>
                                                    <Cell colSpan={2}
                                                          css={{border: 'none'}}>{rep?.isp?.ispu?.name}</Cell>
                                                    <CCell css={{border: 'none'}}>（监督检验机构检验专用章）</CCell>
                                                </TableRow>
                                                <TableRow>
                                                    <RCell css={{border: 'none'}}>监督检验机构核准证号：</RCell>
                                                    <Cell colSpan={2}
                                                          css={{border: 'none'}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                                                    <CCell css={{border: 'none'}}>2024-04-10</CCell>
                                                </TableRow>
                                            </TableBody>
                                        </Table>
                                    </CCell>
                                </TableRow>
                            </RepLink>
                        </TableBody>
                    </Table>
                </div>
                <Text css={{fontSize:'0.8rem'}}>注：本证书一式三份，一份监检机构存档，两份送施工单位，其中一份由施工单位随竣工资料交付使用（建设）单位。
                </Text>
            </div>
        </div>
    }
    return <>
        <div id="Certificate"/>
        {callback()}
    </>;
};
